<template>
  <a-modal
    title="授权角色"
    :width="300"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <template>
      <div style="height: 300px; overflow-y: scroll; overflow-x: hidden;">
        <a-tree
          checkable
          @expand="onExpand"
          :expandedKeys="expandedKeys"
          :autoExpandParent="autoExpandParent"
          v-model="checkedKeys"
          @check="onCheckedNode"
          :treeData="treeData"
        />
      </div>
    </template>
  </a-modal>
</template>

<script>
import { Tree } from 'ant-design-vue'
import { listPermission4Tree, listPermissionByRoleId4Tree, authorize } from '@/api/system/role'

export default {
  components: {
    ATree: Tree
  },
  data () {
    return {
      visible: false,
      confirmLoading: false,
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      treeData: [],
      roleId: 0,
      menuOneIds: [],
      menuTwoIds: [],
      menuIds: ''
    }
  },
  created () {
    listPermission4Tree()
      .then(res => {
        if (res.message !== 'error') {
          this.treeData = res.result
        } else {
          this.$message.error('操作失败！')
        }
      })
  },
  methods: {
    authorize (roleId) {
      this.visible = true
      this.confirmLoading = true
      this.roleId = roleId
      this.expandedKeys = []
      this.checkedKeys = []
      this.menuOneIds = []
      this.menuTwoIds = []
      this.menuIds = ''
      listPermissionByRoleId4Tree({ 'roleId': this.roleId })
        .then(res => {
          if (res.message !== 'error') {
            const menuTree = res.result
            for (let i = 0; i < menuTree.length; i++) {
              if (menuTree[i].isLeaf === 1) {
                this.menuOneIds.push(menuTree[i].key)
              } else {
                this.menuTwoIds.push(menuTree[i].key)
              }
            }
            this.expandedKeys = this.menuOneIds
            this.checkedKeys = this.menuTwoIds
            this.menuIds = this.menuOneIds.join(',') + ',' + this.menuTwoIds.join(',')
            this.confirmLoading = false
          } else {
            this.confirmLoading = false
            this.$message.error('操作失败！')
          }
        })
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheckedNode (node, event) {
      this.menuIds = node.join(',').concat(',').concat(event.halfCheckedKeys.join(','))
    },
    handleSubmit () {
      this.confirmLoading = true
      authorize({ 'roleId': this.roleId, 'menuIds': this.menuIds })
        .then(res => {
          if (res.message !== 'error') {
            this.visible = false
            this.confirmLoading = false
            this.$message.success('授权成功！')
          } else {
            this.confirmLoading = false
            this.$message.error('操作失败！')
          }
        })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
